﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="600">
  <!-- <script src="./js/common/common.js"></script>
    <link href="./js/index/css/index.css" rel="stylesheet" /> -->
  <script src="./js/common/vue.js"></script>
  <script src="./js/common/public.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/anime.min.js"></script>
  <link href="./css/index.css" rel="stylesheet" />
  <title></title>
</head>

<body>
  <main id="app" v-cloak>
    <button style="position: absolute;left:10px;top:30px;z-index: 9999;" @click="start">开始</button>
    <div class="content">
      <div class="personBox" id="showLine">
        <div style="position: relative;left:-12px;top:-10px;">
          <img id="needmoveimg" src="./img/cloth.png" style="left: 33px;top: 115px;position:absolute;width: 30px;height: 30px;z-index: 99999;" />
        </div>
        <div class="personItem" :class="classes(item,index)" :style="setIconStyle(item)" v-for="(item, index) in userArray" :key="index">
          <!-- 款号盒子 -->
          <div class="styleBox" :style="{'bottom':item.numIndex <=13?'5px':'-84px'}">
            <span>mu545444</span>
          </div>
          <div class="imgBox">
            <img src="./img/person.png" alt="" v-if="item.numIndex <=13">
            <img src="./img/personDown.png" style="top:-3px;" alt="" v-else>
            <span class="num" :style="{'top':item.numIndex <=13?'40px':'-40px'}">{{item.numIndex<10?'0'+(item.numIndex):item.numIndex}}</span>
          </div>
          <div class="dot" v-if="item.numIndex <=13"></div>
          <div class="dot dotBottom" v-else></div>
          <div class="dotTwo" v-if="item.numIndex <=13"></div>
          <div class="dotTwo dotBottomTwo" v-else></div>
          <div class="dotThree" v-if="item.numIndex <=13"></div>
          <div class="dotThree dotBottomThree" v-else></div>
          <div class="dotFour" v-if="item.numIndex <=13"></div>
          <div class="dotFour dotBottomFour" v-else></div>
          <div class="dotFive" v-if="item.numIndex <=13"></div>
          <div class="dotFive dotBottomFive" v-else></div>
        </div>
        <!-- <div class="personItem personItemReverse" v-for="(item, index) in 13" :key="index">
          <div class="styleBox">
            <span>mu545444</span>
          </div>
          <div class="imgBox">
            <img src="./img/person.png" alt="">
            <span class="num">{{26-(index)}}</span>
          </div>
        </div> -->
        <div class="positionBox" :style="setIconStyle(item)" v-for="(item, index) in pointArray" :key="index+Math.random()">
          
        </div>
        <div class="lineBox">
        </div>
        <div class="lineOne" :style="lineStyle(routeNew,1410,30,22)">
          <div class="lineOneBottomLine" :style="lineStyleOneBottom(routeNew)" v-show="maxArray(routeNew)<26 && maxArray(routeNew)>14">

          </div>
        </div>
        <div class="lineTwo" :style="lineTwoStyle(routeNewTwo)">
          <div class="lineOneBottomLine" :style="lineStyleTwoBottom(routeNewTwo)" v-show="maxArray(routeNewTwo)<26 && maxArray(routeNewTwo)>14">

          </div>
        </div>

        <div class="lineThree" :style="lineThreeStyle(routeNewThree)">
          <div class="lineOneBottomLine" :style="lineStyleThreeBottom(routeNewThree)" v-show="maxArray(routeNewThree)<26 && maxArray(routeNewThree)>14">

          </div>
        </div>

        <div class="lineFour" :style="lineFourStyle(routeNewFour)">
          <div class="lineOneBottomLine" :style="lineStyleFourBottom(routeNewFour)" v-show="maxArray(routeNewFour)<26 && maxArray(routeNewFour)>14">

          </div>
        </div>

        <div class="lineFive" :style="lineFiveStyle(routeNewFive)">
          <div class="lineOneBottomLine" :style="lineStyleFiveBottom(routeNewFive)" v-show="maxArray(routeNewFive)<26 && maxArray(routeNewFive)>14">

          </div>
        </div>
      </div>
    </div>
  </main>
</body>
</html>